<template>
  <div>
    <van-tabs v-model="tabActive">
      <van-tab
        v-for="(item, index) in brotherCategory"
        :key="index"
        :title="item.name"
      >
        <div class="info">
          <span>{{ item.front_name }}</span>
          <p>{{ item.front_desc }}</p>
        </div>

        <!-- 宫格 -->
        <van-grid :column-num="2" v-if="item.glist">
          <van-grid-item v-for="(value, index) in item.glist.data" :key="index" :to="'/product/'+value.id">
            <van-image width="100" height="100" :src="value.list_pic_url" />
            <h4 class="van-ellipsis">{{ value.name }}</h4>
            <p class="price">￥{{value.retail_price}}</p>
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["id"],
  data() {
    return {
      tabActive: 0,
      data: {},
      brotherCategory: {},
    };
  },
  async created() {
    let res = await axios.get(this.$root.api.GoodsCategory, {
      params: { id: this.id },
    });
    console.log(res.data.data);
    this.data = res.data.data;
    //标签页内容
    this.brotherCategory = this.data.brotherCategory;
    
    this.brotherCategory.forEach(async (item) => {
      item.glist = await this.getlist(item.id, 1);
    
      //强制更新数据
      this.$forceUpdate();
   
    });
  },

  methods: {
    async getlist(id, page) {
      let res = await axios.get(this.$root.api.GoodsList, {
      params: { categoryId: id, page: page, size: 20 },
      });
      console.log(res);
      return res.data.data;
    },
  },
};
</script>

<style lang="less" scoped>
.van-grid-item {
  overflow: hidden;
  box-sizing: border-box;
}
/deep/ .van-grid-item__content::after {
  border-width: 0 2px 2px 0;
}
h4 {
  width: 90%;
  font-size: 14px;
  font-weight: 500;
}

.info {
  width: 100%;
  background-color: linen;
  font-size: 14px;
  padding: 5px;
  span {
    display: block;
    padding: 0 0 10px 0;
  }
}

.price{
    color: lightcoral;
    padding: 10px 0 0 0;
}
</style>